<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body{
		text-align: center;
	}
	#box_bg{
		width:200px;
		height:200px;
		border:2px solid #000;
		margin:20px auto;

	}
	</style>
	<script type="text/javascript">
	window.onload = function(){
		//1.获取节点
       var btn = document.getElementById("btn");
       var box_bg = document.getElementById("box_bg");
          //2.给数组存放颜色
          var bgc = ["red","orange","yellow","green","cyan","blue","purple","pink","blank","#fff"];
          //3.给节点加事件
          btn.onclick = function(){
          	var num = Math.floor(Math.random()*10);
          	//更改div背景颜色
          	box_bg.style.backgroundColor = bgc[num];
          }
	}
    //加载函数
	</script>
</head>
<body>
	<div id="box_bg"></div>
	<button id="btn">添加随机的背景颜色</button>
</body>
</html>